'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    PixelRatio,
    Text,
    View,
	Image,
	TouchableWithoutFeedback
} from 'react-native';
import Swiper from 'react-native-swiper';

import css from '../../../common/common_css.js'
import dp from '../../../common/pxToDp.js'
class GoodsClass extends Component{
    constructor(props) {
      	super(props);
      	this.state = {

      	};
		//屏蔽黄色警告
		console.disableYellowBox = true
    }
	//页面渲染前执行
	componentWillMount(){

	}

	//焦点图跳转页面
	focusClick(id){
		alert(`跳转到id为${id}的页面`);
	}
    render(){
		return(
			<View
				style={[s.goodsClassBox]}
				>
				{/*商品分类顶部*/}
				<View
					style={[s.goodsClassContentTop,s.flexRow]}
					>
					{/*商品分类顶部左侧*/}
					<View
						style={[s.goodsClassTopLeft,s.rightBottomBorder]}
						>
						<TouchableWithoutFeedback
							onPress={this.focusClick.bind(this,'111')}
						>
							<Image
								style={[s.goodsClassTopLeftImg]}
								source={{uri:'https://img.allpyra.com/360c2bcf-5506-4a12-888d-9d6859f5ac33.png'}}
								></Image>
						</TouchableWithoutFeedback>
					</View>
					{/*商品分类顶部右侧*/}
					<View
						style={[s.goodsClassTopRight]}
						>
						{/*商品分类顶部右侧上方*/}
						<View
							style={[s.goodsClassTopRightTop,s.bottomBorder]}
							>
							<TouchableWithoutFeedback
								onPress={this.focusClick.bind(this,'111')}
							>
								<Image
									style={[s.goodsClassTopRightTopImg]}
									source={{uri:'https://img.allpyra.com/2f320a5f-09f5-4090-8bb1-56e643ca07ac.png'}}
									></Image>
							</TouchableWithoutFeedback>
						</View>
						{/*商品分类顶部右侧下方*/}
						<View
							style={[s.goodsClassTopRightBottom,s.bottomBorder]}
							>
							<TouchableWithoutFeedback
								onPress={this.focusClick.bind(this,'111')}
							>
								<Image
									style={[s.goodsClassTopRightBottomImg]}
									source={{uri:'https://img.allpyra.com/c45a417a-f6ec-40d0-9e5b-6750d33469be.png'}}
									></Image>
							</TouchableWithoutFeedback>
						</View>
					</View>
				</View>
				{/*商品分类底部*/}
				<View
					style={[s.goodsClassContentBottom,s.flexRow]}
					>
					<View
						style={[s.goodsClassBottomBox,s.rightBottomBorder,s.center]}
						>
						<TouchableWithoutFeedback
							onPress={this.focusClick.bind(this,'111')}
						>
							<Image
								resizeMode="contain"
								style={[s.goodsClassBottomBoxImg]}
								source={{uri:'https://img.allpyra.com/74153ade-b19c-422d-942e-521a6077cd03.png'}}
								></Image>
						</TouchableWithoutFeedback>
					</View>
					<View
						style={[s.goodsClassBottomBox,s.rightBottomBorder,s.center]}
						>
						<TouchableWithoutFeedback
							onPress={this.focusClick.bind(this,'111')}
						>
							<Image
								resizeMode="contain"
								style={[s.goodsClassBottomBoxImg]}
								source={{uri:'https://img.allpyra.com/87103213-f7b6-4d17-aa41-f36c84d83ea2.png'}}
								></Image>
						</TouchableWithoutFeedback>
					</View>
					<View
						style={[s.goodsClassBottomBox,s.rightBottomBorder,s.center]}
						>
						<TouchableWithoutFeedback
							onPress={this.focusClick.bind(this,'111')}
						>
							<Image
								resizeMode="contain"
								style={[s.goodsClassBottomBoxImg]}
								source={{uri:'https://img.allpyra.com/9dedfefd-dcd4-43be-a38a-a96fb8f9af17.png'}}
								></Image>
						</TouchableWithoutFeedback>
					</View>
					<View
						style={[s.goodsClassBottomBox,s.rightBottomBorder,s.center]}
						>
						<TouchableWithoutFeedback
							onPress={this.focusClick.bind(this,'111')}
						>
							<Image
								resizeMode="contain"
								style={[s.goodsClassBottomBoxImg]}
								source={{uri:'https://img.allpyra.com/082b95d8-be11-4cb9-96da-95760c3cf522.png'}}
								></Image>
						</TouchableWithoutFeedback>
					</View>
					<View
						style={[s.goodsClassBottomBox,s.rightBottomBorder,s.center]}
						>
						<TouchableWithoutFeedback
							onPress={this.focusClick.bind(this,'111')}
						>
							<Image
								resizeMode="contain"
								style={[s.goodsClassBottomBoxImg]}
								source={{uri:'https://img.allpyra.com/ba2d1eb0-67ad-4cf2-836a-ea21fa743483.png'}}
								></Image>
						</TouchableWithoutFeedback>
					</View>
				</View>
			</View>
		)
    }
}

const s = StyleSheet.create(Object.assign(css,{
	rightBottomBorder:{
		borderColor:'#f3f3f3',
		borderRightWidth:1,
		borderBottomWidth:1,
	},
	bottomBorder:{
		borderColor:'#f3f3f3',
		borderBottomWidth:1,
	},
	//商品种类样式
	goodsClassBox:{
		height:246,
		backgroundColor:'#fff'
	},
	goodsClassContentTop:{
		height:121
	},
	goodsClassContentBottom:{
		height:125
	},
	goodsClassTopLeft:{
		width:dp(150),
		height:121
	},
	goodsClassTopLeftImg:{
		width:dp(149),
		height:120
	},
	goodsClassTopRight:{
		width:dp(225),
		height:125
	},
	goodsClassTopRightTop:{
		width:dp(225),
		height:61,
	},
	goodsClassTopRightBottom:{
		width:dp(255),
		height:60,
	},
	goodsClassTopRightTopImg:{
		width:dp(225),
		height:60,
	},
	goodsClassTopRightBottomImg:{
		width:dp(255),
		height:59,
	},
	goodsClassBottomBox:{
		width:dp(75),
		height:125
	},
	goodsClassBottomBoxImg:{
		width:dp(65),
		height:110
	}
}));

module.exports=GoodsClass;
